{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "979e08a7",
   "metadata": {},
   "source": [
    "# Live-view browser tool with Amazon Nova Act SDK\n",
    "\n",
    "## Overview\n",
    "\n",
    "In this tutorial we will learn how to use Nova Act SDK to interact with Amazon Bedrock Agentcore Browser tool and view the browser live.\n",
    "\n",
    "\n",
    "### Tutorial Details\n",
    "\n",
    "\n",
    "| Information         | Details                                                                          |\n",
    "|:--------------------|:---------------------------------------------------------------------------------|\n",
    "| Tutorial type       | Conversational                                                                   |\n",
    "| Agent type          | Single                                                                           |\n",
    "| Agentic Framework   | Nova Act                                                                         |\n",
    "| LLM model           | Amazon Nova Act model                                                            |\n",
    "| Tutorial components | Using NovaAct to interact with browser tool live                                 |\n",
    "| Tutorial vertical   | Cross-vertical                                                                   |\n",
    "| Example complexity  | Easy                                                                             |\n",
    "| SDK used            | Amazon BedrockAgentCore Python SDK, Nova Act                                     |\n",
    "\n",
    "### Tutorial Architecture\n",
    "\n",
    "In this tutorial we will describe how to use Nova Act with browser tool and view the browser live.  \n",
    "\n",
    "In our example we will send natural language instructions to the Nova Act agent to perform tasks on the Bedrock Agentcore browser and view the browser live.\n",
    "\n",
    "<div style=\"text-align:left\">\n",
    "    <img src=\"./images/browser-tool.png\" width=\"50%\"/>\n",
    "</div>\n",
    "\n",
    "### Tutorial Key Features\n",
    "\n",
    "* Using browser tool and view it live \n",
    "* Using Nova Act with browser tool"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ee57d729",
   "metadata": {},
   "source": [
    "## Prerequisites\n",
    "\n",
    "To execute this tutorial you will need:\n",
    "* Python 3.10+\n",
    "* AWS credentials\n",
    "* Amazon Bedrock AgentCore SDK\n",
    "* Nova Act SDK and API key "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "39acfd57",
   "metadata": {},
   "outputs": [],
   "source": [
    "!pip install -r requirements.txt"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0752b660",
   "metadata": {},
   "source": [
    "## Using NovaAct with Bedrock Agentcore Browser tool with live view\n",
    "\n",
    "Here, we will use a helper function to connect via the Amazon DCV SDK to the Bedrock Agentcore browser tool.\n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "68dc257e",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%writefile live_view_with_nova_act.py\n",
    "from bedrock_agentcore.tools.browser_client import browser_session\n",
    "from nova_act import NovaAct\n",
    "from rich.console import Console\n",
    "from rich.panel import Panel\n",
    "import sys\n",
    "import json\n",
    "import argparse\n",
    "sys.path.append(\"../interactive_tools\")\n",
    "from browser_viewer import BrowserViewerServer\n",
    "\n",
    "console = Console()\n",
    "\n",
    "from boto3.session import Session\n",
    "\n",
    "boto_session = Session()\n",
    "region = boto_session.region_name\n",
    "print(\"using region\", region)\n",
    "\n",
    "def live_view_with_nova_act(prompt, starting_page, nova_act_key, region=\"us-west-2\"):\n",
    "    \"\"\"Run the browser live viewer with display sizing.\"\"\"\n",
    "    console.print(\n",
    "        Panel(\n",
    "            \"[bold cyan]Browser Live Viewer[/bold cyan]\\n\\n\"\n",
    "            \"This demonstrates:\\n\"\n",
    "            \"• Live browser viewing with DCV\\n\"\n",
    "            \"• Configurable display sizes (not limited to 900×800)\\n\"\n",
    "            \"• Proper display layout callbacks\\n\\n\"\n",
    "            \"[yellow]Note: Requires Amazon DCV SDK files[/yellow]\",\n",
    "            title=\"Browser Live Viewer\",\n",
    "            border_style=\"blue\",\n",
    "        )\n",
    "    )\n",
    "\n",
    "    try:\n",
    "        # Step 1: Create browser session\n",
    "        with browser_session(region) as client:\n",
    "            ws_url, headers = client.generate_ws_headers()\n",
    "\n",
    "            # Step 2: Start viewer server\n",
    "            console.print(\"\\n[cyan]Step 3: Starting viewer server...[/cyan]\")\n",
    "            viewer = BrowserViewerServer(client, port=8000)\n",
    "            viewer_url = viewer.start(open_browser=True)\n",
    "\n",
    "            # Step 3: Show features\n",
    "            console.print(\"\\n[bold green]Viewer Features:[/bold green]\")\n",
    "            console.print(\n",
    "                \"• Default display: 1600×900 (configured via displayLayout callback)\"\n",
    "            )\n",
    "            console.print(\"• Size options: 720p, 900p, 1080p, 1440p\")\n",
    "            console.print(\"• Real-time display updates\")\n",
    "            console.print(\"• Take/Release control functionality\")\n",
    "\n",
    "            console.print(\"\\n[yellow]Press Ctrl+C to stop[/yellow]\")\n",
    "\n",
    "            # Step 4: Use Nova Act to interact with the browser\n",
    "            with NovaAct(\n",
    "                cdp_endpoint_url=ws_url,\n",
    "                cdp_headers=headers,\n",
    "                preview={\"playwright_actuation\": True},\n",
    "                nova_act_api_key=nova_act_key,\n",
    "                starting_page=starting_page,\n",
    "            ) as nova_act:\n",
    "                result = nova_act.act(prompt)\n",
    "                console.print(f\"\\n[bold green]Nova Act Result:[/bold green] {result}\")\n",
    "        \n",
    "    except Exception as e:\n",
    "        console.print(f\"\\n[red]Error: {e}[/red]\")\n",
    "        import traceback\n",
    "        traceback.print_exc()\n",
    "    finally:\n",
    "        console.print(\"\\n\\n[yellow]Shutting down...[/yellow]\")\n",
    "        if \"client\" in locals():\n",
    "            client.stop()\n",
    "            console.print(\"✅ Browser session terminated\")\n",
    "    return result\n",
    "\n",
    "\n",
    "if __name__ == \"__main__\":\n",
    "    parser = argparse.ArgumentParser()\n",
    "    parser.add_argument(\"--prompt\", required=True, help=\"Browser Search instruction\")\n",
    "    parser.add_argument(\"--starting-page\", required=True, help=\"Starting URL\")\n",
    "    parser.add_argument(\"--nova-act-key\", required=True, help=\"Nova Act API key\")\n",
    "    parser.add_argument(\"--region\", default=\"us-west-2\", help=\"AWS region\")\n",
    "    args = parser.parse_args()\n",
    "\n",
    "    result = live_view_with_nova_act(\n",
    "        args.prompt, args.starting_page, args.nova_act_key, args.region\n",
    "    )\n",
    "\n",
    "    with open('result.txt', 'w') as f:\n",
    "        f.write(str(result))\n",
    "\n",
    "    console.print(f\"\\n[bold green]Nova Act Result:[/bold green] {result}\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bca56bc8",
   "metadata": {},
   "source": [
    "#### Running the script\n",
    "Paste your Nova Act API key below before running the script. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b4164963",
   "metadata": {},
   "outputs": [],
   "source": [
    "NOVA_ACT_KEY= '' ### Paste your Nova Act Key here"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ad636c86",
   "metadata": {},
   "outputs": [],
   "source": [
    "!python live_view_with_nova_act.py --prompt \"Search for macboks and extract the details of the first one\" --starting-page \"https://www.amazon.com/\" --nova-act-key {NOVA_ACT_KEY}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "156a2b78",
   "metadata": {},
   "source": [
    "## What happened behind the scenes? \n",
    "* You instantiated a Browser client and started a session\n",
    "* Then you used the `BrowserViewerServer` to connect to the browser session to view the session locally\n",
    "* Then you created a Nova Act Agent and passed the details of the browser session to it\n",
    "* You then sent natural language instructions to the Nova Act agent and saw the actions live"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9b305069",
   "metadata": {},
   "source": [
    "# Congratulations!"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "amazon-bedrock-agentcore-samples",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.11.13"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
